<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>state</title>
  </head>
  <!-- 
  1.state 的值是对象多个key-value的组合
  2.组件render方法中的this为组件实例对象
  3.组件自定义方法中的this为undefined，如何解决？
     a.强制绑定this:通过函数对象中的bind()
     b.箭头函数
  4.状态数据，不能直接修改活更新setState
-->
  <body>
    <div id="test"></div>
    <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel"></script>
  </body>
  <script type="text/babel">
    class Weather extends React.Component {
      constructor(props) {
        super(props);
        // this.state = { isHot: false, wind: "微风" };
        // this.demo = this.demo.bind(this);
      }
      //初始化状态
      state = { isHot: false, wind: "微风" };

      render() {
        const { isHot, wind } = this.state;
        return (
          <h1 onClick={this.demo}>
            今天天气很{isHot ? "炎热" : "凉爽"},{wind}
          </h1>
        );
      }
      //自定义方法——要用复制语句的形式+箭头函数
      demo = () => {
        const isHot = this.state.isHot;
        this.setState({ isHot: !isHot });
      };
    }
    ReactDOM.render(<Weather />, document.getElementById("test"));
  </script>
</html>
